<template>
    <section class="component component--module quick-links on-home">
        <div class="column column--full">
            <!-- <div class="element element--title">
                <div class="title no-link">Editors' Picks</div>
            </div> -->
            <div class="list list--links wrapper">
                <ul class="link__list horizontal">
                    <li class="list__item" v-for="(item, index) in props.listlinkData" :key='index'>
                        <router-link :class="[{ 'live': liveIndex === index }, 'link']" :to="item.path"
                            @click="tabNavEmits(item)">{{ item.typeName
                            }}</router-link>
                    </li>
                </ul>
            </div>
            <div class="btn btn--menu" v-if='props.moreList.length > 0' style="display:none;">
                <span class="text">More</span>
                <i class="icon">
                    <span class="top"></span>
                    <span class="middle"></span>
                    <span class="bottom"></span>
                </i>
                <div class="menu">
                    <ul class="list list--links">
                        <li class="list__item" v-for='(item, index) in props.moreList' :key='index'>
                            <router-link to=''>{{ item }}</router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup>
let liveIndex = ref(1)
const props = defineProps(['moreList', 'listlinkData'])
const emit = defineEmits(['tabChange'])
const tabNavEmits = (item) => {
    emit('tabChange', item)
}
</script>

<style scoped lang='scss'>
.link__list .list__item:first-child {
    color: #262626;
}

.quick-links .column {
    border-top: none;
}
</style>